<!-- Dom模板 -->
<template>
  <div class="edit_Box">
    <!-- Dom内容 -->
    <div class="top">
      <div>
        <i class="iconfont" @click="leftBtn()">&#xe604;</i>
      </div>
      <div class="num">
        <h3>社区服务</h3>
      </div>
      <div class="iconList">
        <i class="iconfont">&#xe60e;</i> | <i class="iconfont">&#xe600;</i>
      </div>
    </div>
    <div class="edit_main">
      <h4>编辑个人信息</h4>
      <div class="edit_img">
        <img src="../../../../../static/img2/01.png" alt="" />
      </div>
      <div class="edit_footer" v-if="datalist.length>0">
        <div class="delect">
          <p><i class="iconfont">&#xe678;</i>用户名称</p>
          <p> {{datalist[id-1].name}}<i class="iconfont" @click="delect_name('name')">&#xe605;</i></p>
        </div>
        <div class="delect">
          <p><i class="iconfont">&#xe6f7;</i>更换手机号</p>
          <p>{{datalist[id-1].shouji}}<i class="iconfont" @click="delect_name('shouji')">&#xe605;</i></p>
        </div>
        <div class="delect">
          <p><i class="iconfont">&#xe724;</i>邮箱地址</p>
          <p>{{datalist[id-1].email}}<i class="iconfont" @click="delect_name('email')">&#xe605;</i></p>
        </div>
        <div class="delect">
          <p><i class="iconfont">&#xe663;</i>所在城市</p>
          <p>{{datalist[id-1].crity}}<i class="iconfont" @click="delect_name('crity')">&#xe605;</i></p>
        </div>
        <div class="delect">
          <p><i class="iconfont">&#xe614;</i>注销账户</p>
          <p @click="zhuxioa()"><i class="iconfont">&#xe605;</i></p>
        </div>
      </div>
    </div>
    <div>
      <p></p>
    </div>
  </div>
</template>

<script>
import Alert from './delect_alert.vue'
import axios from "axios";

export default {
  components:{
     Alert
  },
  name: "Edit",
  data() {
    return {
      msg: "测试",
      userName:'用户名称',
      datalist:[],
      id:null
    };
  },
  
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
   
  //  this.getdata()
   axios.post('/api/getNum').then((res)=>{
      this.datalist=res.data
      console.log(this.datalist);
     
    }) 
    let {id}=JSON.parse(localStorage.getItem("deng"))
    this.id=id
   console.log(this.id);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    leftBtn(){
      // this.$router.push('/my')
      this.histroy.go(-1)
    },
    delect_name(key){
      this.$router.push({name:"Delect_alert",params:{key}})
    },
    zhuxioa(){
      localStorage.removeItem('deng')
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../../assets/font_edit/iconfont.css");

.edit_Box {
  width: 100%;
  height: 100%;
  background: white;
  padding: 0 10px;
  position: fixed;
  z-index: 999;
}
.top {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  /* background: #ccc; */
  display: flex;
  justify-content: space-between;
}
.next {
  margin-left: 5px;
}
/* i{
  font-size: 16px;
} */
.iconList {
  width: 100px;
  height: 30px;
  background: grey;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  text-align: center;
}
h3 {
  margin-left: 60px;
}
.edit_main {
  width: 100%;
}
.edit_main h4 {
  margin: 20px 0 0 15px;
  font-size: 20px;
  font-weight: 600px;
}
.edit_img {
  margin: 30px 0 0 130px;
}
.edit_img img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.edit_footer {
  margin-top: 30px;
}
.delect {
  width: 100%;
  height: 30px;
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}

.delect p {
  height: 100%;
  line-height: 30px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.delect p i {
  font-size: 25px;
  color: #ccc;
  margin-left: 5px;
}
</style>